<template>

    <el-dialog v-model="props.dialogVisible" title="上传列表" :width="x > 1500 ? '50%' : '90%'"  @close="emit('close')">
        <div  v-for="(item, key) in uploadFileList" :key="key">
            <div v-if="!item.abort" style="display: flex; margin: 10px 0;">
                <div style="width: 20%;padding: 0 10px;height:1.2rem;overflow: hidden;">
                    {{ item.name }}
                </div>
                <div style="width: 20%;">
                    {{ item.speed }}⚡️
                </div>
                <div style="width: 40%">
                    <el-progress :percentage="item.progress"
                        :status="item.totalSlice == item.uploadedSlice ? 'success' : ''" />
                </div>
                <button v-if="!(item.totalSlice == item.uploadedSlice) && !uploadFileList[key].suspend"
                    @click="uploadFileList[key].suspend = true">suspend</button>
                <button v-if="!(item.totalSlice == item.uploadedSlice) && uploadFileList[key].suspend"
                    @click="uploadFileList[key].suspend = false; uploadFileList[key].unlock()">resume</button>
                <button v-if="!(item.totalSlice == item.uploadedSlice)" @click="abort(key)">cancel</button>
            </div>
        </div>
        <div v-if="uploadFileList.length === 0">
            暂无上传任务{{ x }}
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="() => emit('close')">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const x = window.innerWidth
const props = defineProps<{
    uploadFileList: UploadFile[],
    dialogVisible: boolean
}>()
const emit = defineEmits<{
    (ev: 'close'): void
}>()
function abort(key: number) {
    props.uploadFileList[key].abort = true;
    props.uploadFileList[key].abortController.abort()
    props.uploadFileList[key].unlock();
}
function suspendOrResume(index: number) {
    if (props.uploadFileList[index].suspend) {
        props.uploadFileList[index].suspend = false
        props.uploadFileList[index].unlock()
    } else {
        props.uploadFileList[index].suspend = true
    }
}
</script>
<style scoped>
.dialog {
    width: 100px;
}
@media screen  and (max-width: 1360px) {
    .dialog {
    width: 100%;
}
}
</style>